<template>
  <div class="purchase">
    <el-alert :closable="false" type="error" :title="`当前要申请采购的商品：商品编号:${goods_sn}，SKU编号为:${goodsInfo.sku_sn}，申请规格: ${goodsInfo.size?goodsInfo.size:''}、${goodsInfo.color?goodsInfo.color:''}、${goodsInfo.lining?goodsInfo.lining:''}`"></el-alert>
    <div class="max">单次最多可选5家工厂进行采购</div>
    <ul>
      <li v-for="(data,index) in list" :key="index">
        <div class="data">
          <el-select v-model="data.factory_id" placeholder="请选择工厂" style="width: 100%;" clearable>
            <el-option v-for="(item,i) in goodsInfo.factory_sku_list" :key="i" :label="item.factory_name" :value="item.factory_id" :disabled="disabled(item)"></el-option>
          </el-select>
        </div>
        <div class="data">
          <el-input v-model="data.num" placeholder="请输入采购数量(必填)"></el-input>
        </div>
        <div class="data">
          <el-input type="textarea" v-model="data.brief" placeholder="请输入采购备注" />
        </div>
        <div class="data" v-if="list.length > 1">
          <el-button type="danger" size="small" plain @click="delPurchase(index)">删除</el-button>
        </div>
      </li>
    </ul>
    <div style="margin-bottom: 15px;">
      <el-button type="success" size="small" plain @click="addPurchase">增加采购</el-button>
    </div>
    <el-button type="primary" @click="submitForm" :loading="isSubmit">确认</el-button>
    <div style="height: 20px"></div>
  </div>
</template>

<script>
export default {
  props: {
    layerid: {
      type: String,
      default: ''
    },
    goods_id: {
      type: [String,Number],
      default: ''
    },
    goods_sn: {
      type: String,
      default: ''
    },
    goodsInfo:{
      type: Object,
      default(){
        return {}
      }
    }
  },
  computed: {
    disabled(){
      return val => {
        for(let i in this.list){
          if(this.list[i].factory_id === val.factory_id){
            return true
          }
        }
      }
    }
  },
  data(){
    return {
      isSubmit: false,
      list: [{
        factory_id: '',
        num: '',
        brief: ''
      }]
    }
  },
  methods: {
    addPurchase(){
      if(this.list.length == 5){
        return this.$layer.msg(`单次最多可选5家工厂进行采购`);
      }
      this.list.push({
        factory_id: '',
        num: '',
        brief: ''
      })
    },
    delPurchase(index){
      this.list.splice(index,1)
    },
    submitForm() {
      for(let i in this.list){
        if(!this.list[i].factory_id || !this.list[i].num){
          return this.$layer.msg(`请完善第${Number(i)+1}条采购信息`);
        }
      }
      if(this.isSubmit) return
      this.isSubmit = true
      this.$http(this.$ApiList.AddPurchaseOrder,{
        goods_id: this.goods_id,
        sku_id: this.goodsInfo.sku_id,
        upimg: JSON.stringify(this.list)
      }).then(res => {
        this.$layer.msg(res.datas)
        this.$layer.close(this.layerid)
      }).catch(err => {
        this.isSubmit = false
      })
    },
  },
  mounted(){
    console.log(this.goodsInfo)
  }
}
</script>

<style>
.el-select-dropdown__item.is-disabled{
  color: #C0C4CC !important;
}
</style>
<style lang="scss" scoped>
  .purchase{
    flex: 1;
    padding: 20px;
    .max{
      margin-top: 15px;
      color: #FF0000;
    }
    ul{
      padding-bottom: 15px;
      li{
        .data{
          margin-top: 15px;
        }
      }
    }
  }
</style>>